<template>
    <div class="ui-preview">
        <page-bar>
            <a href="javascript:void(0)" slot="left" @click="$emit('close')">
                <i class="uicon uicon-back-w"></i>
            </a>
            <div slot="middle" class="page-pagination" v-if="swiper">
                {{swiper.activeIndex + 1}}/{{swiper.slides.length}}
            </div>
            <a href="javascript:void(0)" slot="right" @click = "del" v-if="config.delete">
                <i class="uicon uicon-del"></i>
            </a>
        </page-bar>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(img,index) in config.list" :key="index">
                    <div class="swiper-zoom-container">
                        <img :src="img">
                    </div>
                </div>
            </div>
        </div>
    </div><!-- end uipreview -->
</template>
<script>
import Swiper from 'swiper'
import pagebar from './pagebar.vue'


export default {
    name:'ui-preview',
    props:{
        config:{
            type:Object,
            default:function(){
                return {
                    active:0,
                    delete:true,
                    list:[]
                }
            }
        }
    },
    created(){
        document.body.classList.add('lock');
    },
    destroyed(){
        document.body.classList.remove('lock');
    },
    components:{
        [pagebar.name]:pagebar
    },
    data(){
        return {
            imgs:[],
            swiper:''
        }
    },
    mounted(){
        if(this.config.list.length>0){
            this.imgs = this.config.list;
            this.swiper = new Swiper('.ui-preview>.swiper-container', {
                zoom: true,
                initialSlide:this.config.active,
                on:{
                    slideChange(){

                    }
                }
                
            });

            this.$nextTick(()=>{
                this.$el.querySelector('.swiper-wrapper').addEventListener('click',(e)=>{
                    if(e.target.tagName.toUpperCase() !== "IMG"){
                        this.$emit('close');
                    }
                },false)
            })
        }
    },
    methods:{
        del(){
            this.$emit('remove',this.swiper.activeIndex)
            this.swiper.removeSlide(this.swiper.activeIndex);
            if(this.swiper.slides.length == 0){
                this.$emit('close');
                return false;
            }
        }
    },
}
</script>
<style lang="less">
.ui-preview {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    bottom:0;
    background: #000;
    width:100%;
    z-index:9999;

    .page-bar {
        position:fixed;
        top:0;
        left:0;
        right:0;
        background-color:rgba(0,0,0,.6);
        z-index: 99999;
    }
    
    .page-pagination {
        font-size:34px;
        color:#fff;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        list-style: none;
        padding: 0;
        z-index: 1;
    }
    .swiper-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        transition-property: transform;
        box-sizing: content-box
    }
    .swiper-slide {
        overflow: hidden;
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        position: relative;
        transition-property: transform;
    }

    .swiper-zoom-container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;

        img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
    }

}
</style>

